<template>
  <div class="dashboard-container">


<el-row :gutter="10">
  <!--    图片每日新增-->
 <el-col :span="10">
   <el-card class="box-card1">
     <div>图片数量:{{dashdata.imgCount.count}}</div>
     <div>今日新增:{{dashdata.imgCountToday.count}}</div>
     <div id="imgechat"></div>
   </el-card>
 </el-col>
  <!--    新闻每日新增-->
  <el-col :span="10">
    <el-card class="box-card1">
      <div>新闻数量:{{dashdata.newsCount.count}}</div>
      <div>今日新增:{{dashdata.newsCountToday.count}}</div>
      <div id="newschart"></div>
    </el-card>
  </el-col>
</el-row>
    <el-row :gutter="10">
     <el-col :span="10">
       <el-card class="box-card1">
         <div>用户数量:{{dashdata.userCount.count}}</div>
         <div>今日新增:{{dashdata.userCountToday.count}}</div>
         <div id="userchart"></div>
       </el-card>
     </el-col>
      <el-col :span="10"  >
        <div class="box1" ref="boxs" @mousemove="move">

        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import dashData from "@/api/xy/dataBash";
import _ from 'lodash'
var echarts = require('echarts');
export default {

  name: 'Dashboard',
  data() {
    return {
    dashdata:{
      imgCount:{
        count:0
      },
      imgCountToday:{
        count:0
      },
      newsCount:{
        count:0
      },
      newsCountToday:{
        count:0
      },
      userCount:{
        count:0
      },
      userCountToday:{
        count:0
      },

    },
      num:0
    }
  },
  computed: {

  },
  methods:{
  //获取数据
    getData(){
      dashData().then(res=>{
        console.log(res)
        this.dashdata = res;
        this.initchart()
      })
    },

    //初始化图片图表
    initchart(){
      //图片的数据
      let xDate=[]
      let yDate=[]
      this.dashdata.imgCountByDay.forEach(el=>{
        xDate.push(el.date);
        yDate.push(el.count)
      })
      this.myChart.setOption({
        title: {
          text: '图片'
        },
        tooltip: {},
        xAxis: {
          data: xDate,
          name:'图片数量',
          nameLocation:'start',
          nameRotate:30,
          axisLabel:{
            rotate:80
          }
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: yDate,
          itemStyle: {
            // 显示上方的数值
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#800080'
                }
              }
            }
          },
        }]
      });
      //新闻的数据
      let newX = [];
      let newY = [];
      this.dashdata.newsCountByDay.forEach(el=>{
        newX.push(el.date)
        newY.push(el.count)
      })
      this.newschart.setOption({
        xAxis: {
          type: 'category',
          data: newX
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data:newY,
          type: 'line',
          itemStyle: {
            // 显示上方的数值
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#800080'
                }
              }
            }
          },
        }]
      });
      //获取用户数据
      let userX = [];
      let userY = [];
      this.dashdata.userCountByDay.forEach(el=>{
        userX.push(el.date)
        userY.push(el.count)
      })
      this.userchart.setOption({
        xAxis: {
          type: 'category',
          data: userX
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: userY,
          type: 'line',
          smooth: true,
          itemStyle: {
            // 显示上方的数值
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#800080'
                }
              }
            }
          },
        }]
      })
    },
    //移动鼠标的事件
    move(){

      // this.debonce(this.count(),3000)
      // this.throttle(this.count(),3000)
      _.throttle(this.count(),2000)
    },
    //函数实现
    count(){
      this.num ++
      this.$refs.boxs.innerHTML = this.num;
      console.log(this.num)
    },
    //防抖代码
    debonce(func,wait){
      let timer = null
      return function (){
        let _this = this
        let  args = arguments
        if (timer) clearTimeout(timer)
        timer = setTimeout(()=>{
          func.apply(_this,args)
        },wait)
      }
    },
    // 节流函数的实现
    throttle(func,wait){
      let timer = null
      return function (){
        let context = this;
        let  args = arguments
        if (!timer){
          timer =setTimeout(()=>{
            timer = null
            func.apply(context,args)
          },wait)
        }
      }
    }
  },
  created(){
    this.getData()
  },
  mounted(){
    this.myChart = echarts.init(document.getElementById('imgechat'));
    this.newschart = echarts.init(document.getElementById('newschart'));
    this.userchart = echarts.init(document.getElementById('userchart'));


  }
}
</script>

<style lang="scss" scoped>
.box-card1{

  #imgechat{
    width: 600px;
    height: 300px;
  }
  #newschart{
    width: 600px;
    height: 300px;
  }
  #userchart{
    width: 600px;
    height: 300px;
  }

}
.box1{
  width: 100%;
  height: 200px;
  border: 1px solid skyblue;
  background-color: #ccc;
  color: white;
  font-weight: bolder;
  text-align: center;
  line-height: 200px;
  font-size: 50px;
}
</style>
